<template>
  <!-- 折线图 -->
  <div class="cbox">
    <div class="box" ref="echarts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    xData: {
      type: Array,
      default: () => {
        return [
          "00:00 01-12",
          "00:30 01-12",
          "01:00 01-12",
          "01:30 01-12",
          "02:00 01-12",
          "02:30 01-12",
          "03:00 01-12",
          "03:30 01-12",
          "04:00 01-12",
          "04:30 01-12",
          "05:00 01-12",
          "05:30 01-12",
          "06:00 01-12",
          "06:30 01-12",
          "07:00 01-12",
          "07:30 01-12",
          "08:00 01-12",
          "08:30 01-12",
          "09:00 01-12",
          "09:30 01-12",
          "10:00 01-12",
          "10:30 01-12",
          "11:00 01-12",
          "11:30 01-12",
          "12:00 01-12",
          "12:30 01-12",
          "13:00 01-12",
          "13:30 01-12",
          "14:00 01-12",
          "14:30 01-12",
          "15:00 01-12",
          "15:30 01-12",
          "16:00 01-12",
          "16:30 01-12",
          "17:00 01-12",
          "17:30 01-12",
          "18:00 01-12",
          "18:30 01-12",
          "19:00 01-12",
          "19:30 01-12",
          "20:00 01-12",
          "20:30 01-12",
          "21:00 01-12",
          "21:30 01-12",
          "22:00 01-12",
          "22:30 01-12",
          "23:00 01-12",
          "23:30 01-12",
        ];
      },
    },
    yData: {
      type: Array,
      default: () => {
        return [
          10, 11, 25, 11, 12, 12, 1, 1, 40, 8, 9, 10, 11, 13, 11, 12, 23, 9, 1,
          3, 8, 9, 37, 10, 11, 13, 11, 12, 12, 40, 1, 3, 8, 9, 30, 13, 11, 12,
          12, 9, 1, 3, 8, 9, 37, 12, 12, 9,
        ];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.echarts);
      myChart.setOption(this.pieOption);
    },
  },
  mounted() {
    this.initChart();
  },
  updated() {
    this.initChart();
  },
  computed: {
    pieOption() {
      return {
        backgroundColor: "#162346",
        // title: {
        //   text: 'Temperature Change in the Coming Week'
        // },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
        },
        toolbox: {
          show: true,
          iconStyle: {
            // color: "#fff",
            borderColor: "#CCC",
          },
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false, show: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#fff",
            formatter: function (value) {
              return value.split(" ").join("\n");
            },
          },
          boundaryGap: false,
          data: this.xData,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
            // formatter: '{value} °C',
          },
          axisTick: {
            alignWithLabel: true,
            show: true,
          },
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: "室内温度",
            type: "line",
            color: "rgba(196,64,60,1)",
            data: this.yData,
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          // {
          //   name: 'Lowest',
          //   type: 'line',
          //   data: [1, -2, 2, 5, 3, 2, 0],
          //   markPoint: {
          //     data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
          //   },
          //   markLine: {
          //     data: [
          //       { type: 'average', name: 'Avg' },
          //       [
          //         {
          //           symbol: 'none',
          //           x: '90%',
          //           yAxis: 'max'
          //         },
          //         {
          //           symbol: 'circle',
          //           label: {
          //             position: 'start',
          //             formatter: 'Max'
          //           },
          //           type: 'max',
          //           name: '最高点'
          //         }
          //       ]
          //     ]
          //   }
          // }
        ],
      };
    },
  },
};
</script>

<style lang="less" scoped>
.cbox {
  width: 100%;
  height: 100%;
}

.box {
  width: 630px;
  height: 400px;
}
</style>
